<template>
  <div class="login">
    <el-card class="login-wrapper">
      <!-- 顶部的图片 -->
      <img src="../assets/imgs/logo_index.png" />
      <!-- 登录表单 -->
      <el-form ref='loginForm' :model='loginForm' :rules='loginRules'>
        <el-form-item prop="mobile">
          <el-input
            v-model="loginForm.mobile"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop='code'>
          <el-input
            v-model="loginForm.code"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop='agree'>
          <el-checkbox v-model='loginForm.agree'>我已经阅读和同意用户协议和隐私条款</el-checkbox>
        </el-form-item>
        <el-form-item>
          <!-- 此处按钮没有提交行为 -->
          <el-button :loading='loginLoading' @click="handleLogin" type="primary" class="codebtn"
            >登 录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
// 导入axios
// import axios from 'axios'
import { toLogin } from '@/api/api-login.js'

export default {
  data () {
    const checkMobile = (rule, value, callback) => {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return callback(new Error('手机号格式不对'))
      } else {
        callback()
      }
    }
    return {
      // 判断按钮是否已经点击
      loginLoading: false,
      // 表单数据
      loginForm: {
        mobile: '13911111111',
        code: '246810',
        agree: false
      },
      // 表单验证配置信息
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        agree: [
          { pattern: /true/, message: '请选择协议', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // 禁用按钮的再次点击
          this.loginLoading = true
          // 调用接口进行登录
          // try {
          // const ret = await Vue.prototype.$http.post('authorizations', {
          //   mobile: this.loginForm.mobile,
          //   code: this.loginForm.code
          // })
          // request方法与axios解耦了
          // const ret = await this.request ({
          //   method: 'post',
          //   url: 'authorizations',
          //   data: {
          //     mobile: this.loginForm.mobile,
          //     code: this.loginForm.code
          //   }
          // })
          //   const ret = await toLogin({
          //     mobile: this.loginForm.mobile,
          //     code: this.loginForm.code
          //   })
          //   if (ret.message === 'OK') {
          //     // 登录成功，缓存token，然后跳转到主页面
          //     sessionStorage.setItem('mytoken', ret.data.token)
          //     this.$router.push('/home')
          //     // 允许登录按钮点击
          //     this.loginLoading = false
          //   }
          //   // 如果前面的接口调用失败了，这里是否打印？否
          //   // console.log('-----------------------')
          // } catch (e) {
          //   // 调用接口发生错误
          //   console.dir(e)
          //   // 允许登录按钮点击
          //   this.loginLoading = false
          //   // 登录失败的提示
          //   this.$message.error('登录失败')
          // }
          const [err, ret] = await toLogin({
            mobile: this.loginForm.mobile,
            code: this.loginForm.code
          })
          if (err) {
            // 允许登录按钮点击
            this.loginLoading = false
            return this.$message.error('登录失败')
          }
          // 登录成功，缓存token，然后跳转到主页面
          sessionStorage.setItem('mytoken', ret.data.token)
          this.$router.push('/home')
          // 允许登录按钮点击
          this.loginLoading = false
        }
      })
    }
    // handleLogin () {
    //   this.$refs.loginForm.validate((valid) => {
    //     if (valid) {
    //       // 禁用按钮的再次点击
    //       this.loginLoading = true
    //       // 如果valid这个参数值是true就说明验证通过
    //       console.log('验证成功')
    //       // 获取表单数据，调用接口实现表单提交
    //       axios.post('authorizations', { mobile: this.loginForm.mobile, code: this.loginForm.code })
    //         .then((ret) => {
    //           if (ret.status === 201 && ret.data.message === 'OK') {
    //             sessionStorage.setItem('mytoken', ret.data.data.token)
    //             this.$router.push('/home')
    //             // console.log(123)
    //           }
    //         })
    //         .catch(() => {
    //           // 登录失败，提示一下
    //           this.$message.error('登录失败')
    //         })
    //         .finally(() => {
    //           // 成功与否都会触发,允许按钮再次点击
    //           setTimeout(() => {
    //             this.loginLoading = false
    //           }, 3000)
    //         })
    //     } else {
    //       console.log('验证失败')
    //     }
    //   })
    // }
  }
}
</script>
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../assets/imgs/login_bg.jpg) no-repeat center / cover;
  .login-wrapper {
    width: 400px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
    img {
      display: block;
      width: 200px;
      margin: 0 auto 20px;
    }
    .code {
      width: 238px;
      margin-right: 10px;
    }
    .codebtn {
      width: 100%;
    }
  }
}
</style>
